React Native এ View, Text, এবং Image হল তিনটি মৌলিক কম্পোনেন্ট যা মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। এই কম্পোনেন্টগুলির মাধ্যমে আপনি UI এর মূল উপাদানগুলো ডিজাইন ও কাস্টমাইজ করতে পারেন। নিচে এই কম্পোনেন্টগুলোর বিস্তারিত আলোচনা করা হলো:
১. View কম্পোনেন্ট
View কম্পোনেন্ট React Native-এ একটি কনটেইনার কম্পোনেন্ট, যা অন্যান্য কম্পোনেন্টকে ধারণ করে এবং সেগুলোর লেআউট এবং স্টাইলিং নিয়ন্ত্রণ করে। এটি মূলত UI এর অংশগুলি গ্রুপ করার জন্য ব্যবহৃত হয়। View সাধারণত একটি কন্টেইনার হিসেবে কাজ করে এবং অন্য UI কম্পোনেন্টগুলিকে একত্রিত বা সাজানোর জন্য ব্যবহার করা হয়।
ব্যবহার:
import React from 'react';
import { View, Text } from 'react-native';
const MyComponent = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, React Native!</Text>
</View>
);
};
export default MyComponent;বৈশিষ্ট্য:
- লেআউট কন্ট্রোল:
Viewআপনাকে লেআউট পরিচালনার জন্য Flexbox ব্যবহারের সুযোগ দেয়, যেমনjustifyContent,alignItems,flexDirectionইত্যাদি। - স্টাইলিং: এটি বিভিন্ন স্টাইলিং প্রোপার্টি যেমন
padding,margin,backgroundColorইত্যাদি ব্যবহার করতে সহায়তা করে।
২. Text কম্পোনেন্ট
Text কম্পোনেন্ট React Native এ টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়। আপনি Text কম্পোনেন্ট ব্যবহার করে যেকোনো লেখা বা স্ট্যাটিক কন্টেন্ট অ্যাপ্লিকেশনের UI তে দেখাতে পারেন। Text কম্পোনেন্টের মধ্যে HTML এর মতো inline স্টাইলিং ব্যবহারের সুবিধা আছে।
ব্যবহার:
import React from 'react';
import { Text } from 'react-native';
const MyComponent = () => {
return <Text style={{ fontSize: 20, color: 'blue' }}>Welcome to React Native!</Text>;
};
export default MyComponent;বৈশিষ্ট্য:
- স্টাইলিং:
Textকম্পোনেন্টে বিভিন্ন স্টাইল প্রয়োগ করা যায়, যেমনfontSize,fontWeight,color,lineHeight, ইত্যাদি। - টেক্সট স্টাইলিং: Inline টেক্সট স্টাইল এবং নেস্টেড টেক্সট তৈরি করার জন্য এটি খুবই উপযোগী।
- টেক্সটের মধ্যে লিঙ্ক: React Native-এ
Textকম্পোনেন্টের মধ্যে আপনি লিঙ্ক, বোল্ড, ইটালিক ইত্যাদি স্টাইল করতে পারেন।
৩. Image কম্পোনেন্ট
Image কম্পোনেন্ট React Native-এ ছবি বা ইমেজ প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি স্ট্যাটিক এবং ডাইনামিক ইমেজ উভয়ই রেন্ডার করতে সক্ষম। আপনি লোকাল ইমেজ ফাইল অথবা রিমোট ইমেজ URL ব্যবহার করতে পারেন।
ব্যবহার:
import React from 'react';
import { Image } from 'react-native';
const MyComponent = () => {
return <Image source={{ uri: 'https://example.com/myimage.png' }} style={{ width: 100, height: 100 }} />;
};
export default MyComponent;বৈশিষ্ট্য:
- লোকাল এবং রিমোট ইমেজ: আপনি লোকাল ইমেজ ফাইল বা রিমোট ইমেজ URL ব্যবহার করতে পারেন।
- স্টাইলিং:
Imageকম্পোনেন্টেwidth,height,resizeModeইত্যাদি স্টাইল প্রোপার্টি ব্যবহার করা যায়।resizeMode: ইমেজের আকার পরিবর্তন করতে ব্যবহৃত হয়, যেমনcontain,cover,stretchইত্যাদি।
- অটো রিসাইজ: Image কম্পোনেন্টের সাহায্যে আপনি ইমেজকে অ্যাপের UI তে সঠিক আকারে রিসাইজ করতে পারেন।
সারাংশ
- View কম্পোনেন্ট: এটি একটি কনটেইনার যা অন্যান্য UI উপাদানকে ধারণ করে এবং তাদের লেআউট এবং স্টাইল নিয়ন্ত্রণ করে।
- Text কম্পোনেন্ট: এটি টেক্সট প্রদর্শন করার জন্য ব্যবহৃত হয় এবং এটি বিভিন্ন স্টাইল এবং টেক্সট ফর্ম্যাটিং এর সুবিধা দেয়।
- Image কম্পোনেন্ট: এটি ছবির প্রদর্শন এবং স্টাইলিংয়ের জন্য ব্যবহৃত হয়, যা লোকাল অথবা রিমোট ইমেজ উভয়ই সাপোর্ট করে।
এই কম্পোনেন্টগুলি React Native অ্যাপ্লিকেশনের মৌলিক UI উপাদানগুলির মধ্যে অন্তর্ভুক্ত এবং এগুলির সাহায্যে আপনি দ্রুত এবং ইন্টারেক্টিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
